<div class="dashboard-navigation">
    <adf-sidebar-action-menu
        *ngIf="actions$ | async as actions"
        [title]="'DASHBOARD.NEW_MENU.LABEL' | translate"
        [expanded]="expanded$ | async"
        class="dashboard-navigation__section dashboard-navigation__section--new"
        [ngClass]="{ 'section--new--mini': !(expanded$ | async) }"
    >
        <mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon>
        <div sidebar-menu-expand-icon>
            <mat-icon>add_box</mat-icon>
        </div>
        <div sidebar-menu-options>
            <ng-container *ngFor="let action of actions">
                <button mat-menu-item (click)="runAction(action.handler)">
                    <mat-icon>{{ action.icon }}</mat-icon>
                    <span>{{ action.title | translate }}</span>
                </button>
            </ng-container>
        </div>
    </adf-sidebar-action-menu>

    <div
        class="dashboard-navigation__section dashboard-navigation__section--menu"
        *ngFor="let list of navigation"
    >
        <ul class="dashboard-navigation-menu">
            <li
                *ngFor="let item of list"
                class="dashboard-navigation-menu__item"
                routerLinkActive
                #rla="routerLinkActive"
                title="{{ item.title || '' | translate }}"
            >
                <button
                    mat-icon-button
                    mat-ripple
                    matRippleColor="primary"
                    [routerLink]="item.route.url"
                    [color]="rla.isActive ? 'accent' : 'primary'"
                    [matRippleTrigger]="rippleTrigger"
                    [matRippleCentered]="true"
                    [title]="item.label | translate"
                >
                    <mat-icon>{{ item.icon }}</mat-icon>
                </button>

                <span
                    #rippleTrigger
                    class="menu__item--label"
                    [routerLink]="item.route.url"
                    [hidden]="!(expanded$ | async)"
                    [ngClass]="{
                        'menu__item--active': rla.isActive,
                        'menu__item--default': !rla.isActive
                    }"
                    >{{ item.label | translate }}</span
                >
            </li>
        </ul>
    </div>
</div>
